<template>
  <div>
    <!-- 搜索框 -->
    <Header></Header>
    <section>
      <div class="left">
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            @click="changeIdx(index)"
          >
            <div :class="currenIndex == index ? 'choosen' : ''">
              {{ item.category }}
            </div>
          </li>
        </ul>
      </div>
      <div class="right" ref="right">
        <div>
          <img :src="this.rightData.imgUrl" alt="" />
          <div v-for="(it, idx) in rightData.obj" :key="idx" class="content">
            <span v-if="it.name" class="content-name">{{ it.name }}</span>
            <div v-if="it.name == '品牌'">
              <ul>
                <li v-for="(k, index) in it.obj" :key="index">
                  <img :src="k.img" alt="" class="contentImg" />
                </li>
              </ul>
            </div>
            <div v-else>
              <ul>
                <li v-for="(k, index) in it.obj" :key="index">
                  <img v-if="k.img" :src="k.img" alt="" class="content-img" />
                  <span
                    :class="k.img ? 'content-title' : 'content-title-box'"
                    >{{ k.title }}</span
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Tabbar />
  </div>
</template>
<script>
import Tabbar from "../components/common/Tabbar.vue";
import Header from "../components/List/Header.vue";
import http from "../common/api/request";
import BScroll from "better-scroll";
export default {
  name: "List",
  components: {
    Tabbar,
    Header,
  },
  data() {
    return {
      dataList: {},
      currenIndex: 0,
      rightData: {},
      rightBScroll: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      http
        .$axios({
          url: "/api/goods/list",
        })
        .then((res) => {
          this.dataList = res;
          this.rightData = res[0].project;
        });
    },
    changeIdx(index) {
      this.currenIndex = index;
      this.rightData = this.dataList[this.currenIndex].project;
      this.$nextTick(() => {
        let rightHeight =
          this.$refs.right.getElementsByClassName("right").clientHeight;
        if (rightHeight <= 580) {
          this.rightBScroll = "";
        }
        this.rightBScroll = new BScroll(this.$refs.right, {
          click: true,
        });
        this.rightBScroll.on("scroll", (pos) => {
          pos.y = 0;
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.left {
  width: 78px;
  float: left;
  ul {
    li {
      width: 100%;
      height: 36px;
      font-size: 14px;
      text-align: center;
      margin: 10px 0;
    }
  }
}

.choosen {
  color: orange;
  border-left: 2px solid orange;
}

.right {
  margin-left: 78px;
  height: 580px;
  overflow: hidden;
  img {
    width: 272px;
    height: 98px;
    margin: 8px;
  }
  .content {
    width: 272px;
    margin-left: 8px;
    margin-bottom: 4px;
    box-shadow: 2px 2px 4px #ccc;
    padding-top: 0.57142857rem;
    padding-bottom: 0.57142857rem;
    .content-name {
      width: 120px;
      height: 20px;
      font-size: 14px;
      margin-left: 10px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .content-img {
          width: 56px;
          height: 56px;
        }
        .contentImg {
          width: 72px;
          height: 40px;
        }
        .content-title {
          width: 72px;
          height: 15px;
          font-size: 12px;
          text-align: center;
        }
        .content-title-box {
          width: 72px;
          margin: 5px;
          height: 20px;
          font-size: 12px;
          text-align: center;
          background-color: rgb(185, 184, 199);
        }
      }
    }
  }
}
</style>